<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
        <link rel="stylesheet" href="../css/frozen.css">
        <link rel="stylesheet" href="demo.css">
        <script src="../lib/zepto.min.js"></script>
        <script src="../js/frozen.js"></script>
    </head>
    
    <body ontouchstart>
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>文本 type</h1><button class="ui-btn">回首页</button>
        </header>
        <footer class="ui-footer ui-footer-btn">
            <ul class="ui-tiled ui-border-t">
                <li data-href="index.html" class="ui-border-r"><div>基础样式</div></li>
                <li data-href="ui.html" class="ui-border-r"><div>UI组件</div></li>
                <li data-href="js.html"><div>JS插件</div></li>
            </ul>
        </footer>
        <section class="ui-container">



<section id="type">
    <div class="demo-item">
        <p class="demo-desc">文本大小</p>
        <div class="demo-block">
            <div class="ui-whitespace">
                <p>默认字体大小32px, 行高为1.5</p>
                <h1>标题：h1, 36px</h1>
                <h2>栏目：h2, 34px</h2>
                <h3>内文：导航，正文段落h3, 32px</h3>
                <h4>内文：人名歌名标题等h4, 32px</h4>
                <h5>副内文：h5, 同ui-txt-sub, 28px</h5>
                <h6>辅助文字：h6, 同ui-txt-tips, 24px</h6>
            </div>
        </div>
    </div>    
    <div class="demo-item">
        <p class="demo-desc">文本颜色</p>
        <div class="demo-block">
            <div class="ui-whitespace">
                <p class="ui-txt-default">主要内容色</p>
                <p class="ui-txt-white" style="background:#000">主要内容反色</p>
                <p class="ui-txt-info">辅助次要内容色</p>
                <p class="ui-txt-muted">时间，输入框，不可点击状态文本色</p>
                <p class="ui-txt-warning">警示，会员红名，搜索热词，同ui-txt-red</p>
                <p class="ui-txt-highlight">关键词高亮，同em</p>
                <p><a>链接颜色</a></p>
                <p class="ui-txt-feeds">feeds链接</p>
            </div>
        </div> 
    </div>
    <div class="demo-item">
        <p class="demo-desc">文本两端对齐</p>
        <div class="demo-block">
            <div class="ui-whitespace">
                <p class="ui-txt-justify-one">一行文本</p>
                <p class="ui-txt-justify">普通的多行文本内容：在首个《进击的巨人》预热视频中只是描述了一个巨人恰好拿起一人准备放进嘴巴里面，而另个场景则是超大型巨人附着浓重的烟雾将巨手拍下来。将于今年8月1日上映。</p>
            </div>
        </div>
        
    </div>
</section>


        </section><!-- /.ui-container-->
        <script>
        $('.ui-list li,.ui-tiled li').click(function(){
            if($(this).data('href')){
                location.href= $(this).data('href');
            }
        });
        $('.ui-header .ui-btn').click(function(){
            location.href= 'index.html';
        });
        </script>
    </body>
</html>